<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/app.css">

<div id="app">
    <h2 class="title text-center">{{site.title}}</h2>
    <!-- 未登录 -->
    <div v-if="token == ''">
        <div class="mt text-center">
            <input class="input shadow" type="text" placeholder="账号" v-model="login.account"/>
        </div>
        <div class="mt text-center">
            <input class="input shadow" type="password" placeholder="密码" v-model="login.password"/>
        </div>
        <button class="btn shadow mt" v-on:click="loginBtn">登录</button>
    </div>
    <!-- 登录 -->
    <div v-else>
        <div class="text-center">
            <div v-if="info && info.id" class="nickname">{{info.nickname||'暂无昵称'}} : {{key}}</div>
            <button class="btn sync-btn shadow mt" v-if="sync==false" v-on:click="syncBookmark">{{text.sync}}</button>
            <button class="btn sync-btn bg-red shadow mt" v-else>{{text.syncStart}}</button>
        </div>
        <div class="out-warp"><span v-on:click="out">{{text.out}}</span></div>
    </div>
    <!-- 底部 -->
    <div class="footer text-center"><span class="cur" v-on:click="tabsHref">{{site.company}}</span></div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
